<template>
  <div :id='id'>
    
  </div>
</template>
<script>
import '../../static/ueditor/ueditor.config.js'
import '../../static/ueditor/ueditor.all.js'
import '../../static/ueditor/lang/zh-cn/zh-cn.js'
import '../../static/ueditor/ueditor.parse.js'
import '../../static/ueditor/imageUtil.js'
export default {
  name: "ue",
  data() {
    return {
      id: Math.random() + '_ueditor_p',
      editorId: '',
      editor: null,
      isReady: false
    };
  },
  props: {
      config: Object
  },
 
 
  
  methods: {
     init() {
       this.editorId = Math.random() + '_ueditor'
       document.getElementById(this.id).innerHTML = "<div id='"+this.editorId+"'></div>"

      var config = {
          initialFrameWidth:'100%',  
          initialFrameHeight:380,
          toolbars: [[
              'fullscreen', 'source', '|', 'undo', 'redo',
              'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'forecolor', 'backcolor', 
              
              'fontsize',  'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','simpleupload'
              
          ]]
        }
      
    
      
      this.editor = window.UE.getEditor(this.editorId, config);
      // 初始化UE
      this.editor.addListener("ready", () => {
        this.isReady = true
      });
    },
    getContent () {
      return this.editor.getContent();
    },
    setContent (content) {
      this.editor.ready(() => {
        this.$nextTick(() => {
          this.editor.setContent(content);
        })
      })
    },
    clear () {
        this.editor.ready(() => {
          this.$nextTick(() => {
            this.editor.setContent('');
          })
        })
    }
  },
   mounted () {
    console.log('editor mounted...')
  },
  activated () {
    console.log('editor activated...')
   
      this.init()
    
  },
  deactivated () {
    console.log('editor deactivated...')
     this.editor.destroy()
        document.getElementById(this.editorId).remove()
  }
};
</script>